.em-blog-content {
    // transition: width 0.15s ease-out 0s;
    .right-sidebar-show & {
        // width: e("calc(100% - 600px)")!important;
        @media only screen and (max-width: 767px) {
            width: 100%!important;
        }
    }
    @media only screen and (max-width: 767px) {
        left: 0;
        width: 100%!important;
    }
    // z-index: 103;
    position: fixed;
    top: 55px;
    left: 300px;
    width: e("calc(100% - 300px)");
    height: e("calc(100% - 55px)")!important;
    padding: 16px;
    overflow: auto;
    > .header {
        .ui.header {
            .sub.header {
                color: #707070;
                font-size: 12px;
                margin-top: 8px;
                a.author {
                    cursor: pointer;
                }
                .readCnt {
                    cursor: pointer;
                    margin-left: 16px;
                    a {
                        cursor: pointer;
                    }
                }
                .commentCnt {
                    cursor: pointer;
                    margin-left: 16px;
                    a {
                        cursor: pointer;
                    }
                }
                .followersCnt {
                    // cursor: pointer;
                    margin-left: 16px;
                    a {
                        // cursor: pointer;
                    }
                }
            }
        }
        margin-bottom: 24px;
    }
    .topbar {
        position: relative;
        height: 30px;
        margin-bottom: 8px;
        > .ui.breadcrumb {
            line-height: 30px;
        }
        &:after {
            content: '';
            clear: both;
        }
        .actions {
            float: right;
            > .ui.basic.button {
                padding: 8px;
                box-shadow: none;
                &:hover {
                    box-shadow: 0 0 0 1px rgba(34, 36, 38, .35) inset, 0 0 0 0 rgba(34, 36, 38, .15) inset;
                }
                > i.icon {
                    margin-right: 2px;
                    &.hide {
                        position: relative;
                        top: -1px;
                    }
                    &.unhide {
                        position: relative;
                        top: -1px;
                    }
                }
            }
        }
    }
    > .ui.message {
        .content {
            > span {
                display: inline-block;
                margin-top: 10px;
            }
            .ui.button {
                position: relative;
                top: -5px;
                left: 10px;
            }
        }
    }
    .footer {
        margin-top: 16px;
        > span {
            font-size: 12px;
        }
        .rate {
            margin-right: 16px;
            cursor: pointer;
            color: #4183c4;
        }
        > .tags {
            float: right;
            .ui.selection.dropdown {
                border: none;
                &:hover {
                    box-shadow: 0 0px 1px 0px #2185d0;
                }
            }
        }
        &:after {
            content: '';
            clear: both;
            display: block;
        }
    }
    > .ui.feed {
        margin-bottom: 25px!important;
        > .event {
            position: relative;
            &.opened {
                > .content .extra.text {
                    &:hover {
                        max-height: none;
                        overflow-y: auto;
                        padding-bottom: 25px;
                    }
                }
            }
            >.label+.content {
                max-width: e("calc(100% - 50px)");
            }
            > .content .extra.text {
                position: relative;
                max-width: none;
                min-height: 25px;
                max-height: 60px;
                overflow-y: hidden;
                &:hover {
                    > .btn-open {
                        display: block;
                    }
                }
                > .btn-open {
                    display: none;
                    height: 25px;
                    background-color: rgba(0, 0, 0, 0.1);
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    left: 0;
                    text-align: center;
                    padding-top: 2px;
                }
                pre {
                    white-space: pre-wrap;
                    white-space: -moz-pre-wrap;
                    white-space: -pre-wrap;
                    white-space: -o-pre-wrap;
                    word-wrap: break-word;
                    word-break: break-all;
                }
            }
            &.active {
                background: rgba(0, 0, 0, .03);
                &:before {
                    width: 4px;
                }
            }
            &:hover {
                background: rgba(0, 0, 0, .03);
                &:before {
                    width: 4px;
                }
            }
            &:before {
                content: "";
                position: absolute;
                top: 0;
                left: -4px;
                bottom: 0;
                background: #2098D1;
                width: 0;
                -webkit-transition-property: width;
                transition-property: width;
                -webkit-transition-duration: 0.3s;
                transition-duration: 0.3s;
                -webkit-transition-timing-function: ease-out;
                transition-timing-function: ease-out;
            }
        }
    }
    .markdown-body {
        span[class="at-user"] {
            cursor: pointer;
        }
    }
    .tms-blog-content.markdown-body {

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {

            &:before {
                content: "#";
                color: red;
                display: none;
                cursor: pointer;
                position: absolute;
                left: -15px;
            }

            &.active {
                &:before {
                    display: inline-block;
                }
                
            }
        }

    }
}

.tms-blog-progress {
    position: absolute;
    display: inline-block;
    top: 55px;
    left: 0;
    width: 0;
    height: 2px;
    margin-left: 300px;
    background-color: #2185d0;
    box-shadow: 0px 0px 8px 0px #205081;
    @media only screen and (max-width: 767px) {
        margin-left: 0;
    }
}
.pc-left-bar-hide {
    .tms-blog-progress {
        margin-left: 0;
    }
}

.em-blog-content-wrapper {
    position: fixed;
    top: 55px;
    width: e("calc(100vw)")!important;
    height: e("calc(100% - 55px)")!important;
}

@media only screen and (max-width: 767px) {
    .tms-blog {
        &.left-sidebar-show {
            .em-blog-content-wrapper {
                > .ui.dimmer {
                    display: block;
                    opacity: 1;
                }
            }
        }
        &.right-sidebar-show {
            .em-blog-content-wrapper {
                > .ui.dimmer {
                    display: block;
                    opacity: 1;
                }
            }
        }
        .em-blog-content-wrapper {
            > .ui.dimmer {
                display: none;
            }
        }
    }
}
